<template>
  <div class="share">
    <div id="shareHtml">
      <div id="share-body">
       
        <div style="width: 150,height: 150" id="qrcode" ref="qrcode"></div><!--生成的二维码-->
        <span class="share-dec">长按保存二维码</span>
      </div>
    </div>
    <img style="width: 150,height: 150" class="share-img" :src="shareImg"/>
   
    <el-button type="primary" @click="saveImg">主要按钮</el-button>
  </div>
</template>
<script>
import QRCode from "qrcodejs2"
import html2canvas from 'html2canvas'
import $ from 'jquery'
export default {
  data() {
    return {
      shareImg: '', // 最终生成的海报图片
    }
  },
  mounted(){
      $('#qrcode').html("")
     $("#shareHtml").show();
      this.shareImg=""
    this.$nextTick(() => {
      this.qrcode()
      this.createPoster()
    })
  },
  methods: {
      download(){
          console.log(this.shareImg)
          var eleLink = document.createElement("a");
      eleLink.href = this.shareImg; // 转换后的图片地址
      eleLink.download = "pictureName";
      // 触发点击
      document.body.appendChild(eleLink);
      
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
      },

      
saveImg() {
       
        var a = document.createElement("a");
        a.href = this.shareImg;
        a.download = "drcQrcode";
        a.click();
 },
   
    qrcode () {
      let scale = 750/360,
        windth = window.innerWidth/scale,
        height = window.innerHeight/scale;
      let qrcode = new QRCode("qrcode", {
        width: 120, // 二维码宽度，单位像素
        height: 120, // 二维码高度，单位像素
        text: "fuck you" // 生成二维码的链接
      });
    },
    createPoster() {
      const vm = this
      const dom = document.getElementById('shareHtml')
      html2canvas(dom, {
        useCORS: true,
        allowTaint: false,
        logging: false,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector('#shareHtml')
          e.style.display = 'block'
        }
      }).then(function(canvas) {
        vm.shareImg = canvas.toDataURL('image/png')
        console.log("生成的图片",vm.shareImg)
        $("#shareHtml").hide()
      })
    }
  }
}
</script>
